<template>
    <van-nav-bar   left-arrow @click-left="onClickLeft">
        <template #right>
            <van-icon name="more" size="22" color="black"/>
        </template>
    </van-nav-bar>
    <van-image
  width="100%"
  height="330"
  :src="productData.imgurl"
/>
<!---商品价格-->
<div class="prices">
    ￥<em>{{productData.newprice}}</em><span>.00</span>&nbsp;<span class="dsj">到手价</span>
</div>
<div style="font-size: 15px; font-weight: 800; padding: 0 10px;">
    {{productData.pname}}
</div>
<div style="color: #c7c9ce; padding-top: 8px; font-size: 12px; padding-left: 10px;">
    商品原价：{{productData.oldprice}}元
</div>
<div style="width: 100%; text-align: center; margin-top: 10px;">

<van-row>
  <van-col span="8"><van-icon name="location-o" />分享</van-col>
  <van-col span="8"><van-icon name="star-o" />收藏</van-col>
  <van-col span="8"><van-icon name="bill-o" />降价通知</van-col>
</van-row>

</div>
<hr>
<img :src="productData.description" alt="" width="100%" >


</template>

<script setup>
import { reactive, ref } from 'vue';
import request from '../utils/request';
import { useRoute } from 'vue-router';
// useRoute 作用是在路由跳转的时候传递参数 ，  useRouter 只负责路由跳转
const route = useRoute()

 const onClickLeft = () => history.back();

const productData = reactive({
    pname:'',
    imgurl:'',
    newprice:'',
    oldprice:'',
    description:''
})

const id= route.query.id
const callProductApi = async()=>{
    console.log(id);
   let res= await request.get('product/action?id='+id)
   console.log(res.data);
   productData.pname = res.data.product.pname
   productData.imgurl = res.data.product.imgurl
   productData.newprice=res.data.product.newprice
   productData.oldprice = res.data.product.oldprice
productData.description =res.data.product.description
}

callProductApi()


</script>

<style scoped>

.prices{
    margin-top: 10px;
    color: red;
    font-size: 12px;
    font-weight: 800;
    em{
        font-size: 26px;
    }
    .dsj{
        color: aliceblue;
        background-color: #FF0F23;
        line-height: 10px;
        padding: 4px 4px 3px 4px;
        margin-left: 6px;
        border-radius: 3px;
        font-weight: 800;
    }
}


</style>